<template>
    <div>

        <div class="cards">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

                    <el-button style="background: #7052ff; color:#fff;" @click="saveRow">新增</el-button>
                    <div>

                        <el-table :data="tableData" style="width: 100%; margin-bottom: 20px;margin-top:20px" row-key="id"
                            v-loading="loading" default-expand-all>
                            <el-table-column prop="id" label="ID" align="center" width="50" />
                            <el-table-column prop="orderQuantity" label="起订量" align="center"  />

                            <el-table-column prop="printArea" label="印刷区域" align="center"
                                width="200"></el-table-column>
                            <el-table-column prop="logoColor" label="logo颜色" align="center"
                                width="120"></el-table-column>
                            <el-table-column prop="printSides" label="印刷面数" align="center"></el-table-column>
                            <el-table-column prop="totalPrice" label="印刷总价" align="center"></el-table-column>
                            <el-table-column prop="unitPrice" label="印刷单价" align="center"
                                width="120"></el-table-column>
                            <el-table-column fixed="right" label="操作" width="180" align="center">
                                <template #default="scope">
                                    <el-button style="color: #7052ff ;" link size="small"
                                        @click.prevent="editRow(scope.$index, scope.row)"> 编辑</el-button>

                                    <el-button style="color: #7052ff ;" link size="small"
                                        @click.prevent="deleteRow(scope.$index, scope.row.id)"> 删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
            </el-tabs>

        </div>



        <el-dialog v-model="drawer" :title="Tips" width="500px" :before-close="handleClose">
            <el-form ref="ruleFormRef" :rules="rules" :model="uttForm" label-width="auto">
                <p style="margin-bottom:10px;font-size:16px">材料信息</p>
                <el-form-item label="起订量" prop="orderQuantity">
                    <el-input v-model="uttForm.orderQuantity" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="印刷区域" prop="printArea">
                    <el-input v-model="uttForm.printArea" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="logo颜色" prop="logoColor">
                    <el-input v-model="uttForm.logoColor"></el-input>
                </el-form-item>
                <el-form-item label="印刷面数" prop="printSides">
                    <el-input v-model="uttForm.printSides" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="印刷总价" prop="totalPrice">
                    <el-input placeholder="请填写" v-model="uttForm.totalPrice"></el-input>
                </el-form-item>
                <el-form-item label="印刷单价" prop="unitPrice">
                    <el-input v-model="uttForm.unitPrice" type="textarea" placeholder="请填写" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="CloseAdd()">取消</el-button>
                <el-button style="background: #7052ff; color:#fff;" @click="handleSaveAdd()">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted, reactive, computed, ref } from 'vue';
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox, FormRules, FormInstance } from 'element-plus'
const Card = defineAsyncComponent(() => import('@/components/cards/index.vue'))
import { User, Plus, Warning, QuestionFilled } from '@element-plus/icons-vue';
import {  bronzingDel, bronzingEdit, bronzingList, bronzingAdd } from '@/api/index'
import router from '@/router';

const drawer = ref(false)
const activeName = ref('first')

const Tips = ref('新增')
const current = ref<number>(1)
const total = ref<number>(0)
const ruleFormRef = ref<FormInstance>()

const uttForm = ref({
    id: '',
    logoColor: '',
    unitPrice: '',
    totalPrice: '',
    printArea: '',
    printSides: '',
    orderQuantity: ''
})




const pages = ref({
    pageNo: 1,
    pageSize: 1000,
})
const loading = ref(false)
// 默认选中的值

const GetPage = async () => {
    console.log('-=-=-=',)
    loading.value = true
    const res = await bronzingList(pages.value)
    console.log('-=-=-ss=', res)
    tableData.value = res.data
    if (res.code == 200) {
        loading.value = false
    }
}

onMounted(() => {
    GetPage()
})

const handleClose = () => {
    drawer.value = false
    ruleFormRef.value?.resetFields()
}

const editRow = async (i: String, row: Object) => {
    Tips.value = '编辑'
    drawer.value = true
    uttForm.value = row

}

const saveRow = async () => {
    drawer.value = true
    Tips.value = '新增'
}


const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    pages.value.pageSize = val
    GetPage()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    pages.value.pageNo = val
    GetPage()
}

const deleteRow = (i: String, row: any) => {
    console.log('res', row)
    ElMessageBox.confirm(
        '是否确认删除?',
        '提示',
        {
            confirmButtonText: '确认删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await bronzingDel(row)
            if (res.code === 200) {
                GetPage()
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
            }

        })
}



const tableData = ref([])


const rules = reactive<FormRules<RuleForm>>({
    logoColor: [{ required: true, message: '请填写', trigger: 'blur' }],
    unitPrice: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
    totalPrice: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
    printArea: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
    printSides: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
    orderQuantity:[{ required: true, message: '请填写', trigger: 'blur' },]
})



const handleSaveAdd = () => {
    ruleFormRef.value?.validate(async (valid: any) => {
        if (valid) {
            const res = Tips.value == '新增' ? await bronzingAdd(uttForm.value) : await bronzingEdit(uttForm.value)
            console.log('打印', res)
            await GetPage()
            drawer.value = false
            ruleFormRef.value?.resetFields()
        } else {
            console.log('error submit!',)
        }
    })
}

const CloseAdd = () => {
    ruleFormRef.value?.resetFields();
    drawer.value = false
}


const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

</script>

<style scoped lang="scss">.ache_left {
    min-width: 200px;
    border-right: 1px solid #f7f4f4;
    min-height: 770px;
    padding-right: 20px;
}</style>